<template>
  <div>
    <VanNavBar
      left-arrow
      fixed
      @click-left="onClickLeft"
      :title="title"
      :right-text="rightText"
      @click-right="onClickRight"
    >
    </VanNavBar>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

/* 
  需求：
    1.点击返回，返回上一页 (历史记录)
    2.暴露一个title属性，用于title显示 √
    3.暴露一个rightText，用于设置右侧文字 √
    4.点击右侧的文字按钮，要做的事情，是无法确定的 √
*/
const router = useRouter()
const onClickLeft = () => {
  // 实现返回
  // 如果有当前网站的上一个记录，则返回，如果没有记录，跳转首页
  // history.state?.back  有没有上一次的历史记录

  if (props.back) return props.back() // 检测左侧按钮是否存在自定义事件
  if (history.state?.back) {
    router.back()
  } else {
    router.push('/')
  }
}
const onClickRight = () => {
  // 点击右侧的文字
  emit('clickRight')
}

const props = defineProps<{
  title?: string
  rightText?: string
  back?: () => void
}>()

const emit = defineEmits<{
  (e: 'clickRight'): void
}>()
</script>

<style scoped lang="scss">
:deep() {
  .van-nav-bar {
    &__arrow {
      font-size: 18px;
      color: var(--cp-text1);
    }

    // &:连接符   将 .van_nav_bar 与 __text 进行连接，合并为一个新的选择器
    &__text {
      font-size: 15px;
    }
  }
}
</style>
